<template>


  <div class="app-container" :style="['background:'+base.color]" v-loading="pageLoading"
       :element-loading-text="elementloadingtext"
  >

    <el-dialog title="收货地址" :visible.sync="dialogStatus.swiper3threadlist">
      <el-form>
        <p>抓取麻辣或留言板内容</p>
        <el-input placeholder="粘贴留言板或麻辣社区帖子内容" v-model="tempData.systemLinks" @input="onInputSwiper"></el-input>
        <p></p>
        <p>自定义标题</p>
        <el-input placeholder="自定义标题" v-model="tempData.title" @input="onInputSwiper"></el-input>
        <p></p>
        <p>自定义链接</p>
        <el-input placeholder="自定义链接" v-model="tempData.links" @input="onInputSwiper"></el-input>
        <p></p>
        <p>自定义简介</p>
        <el-input placeholder="自定义简介" v-model="tempData.desc" @input="onInputSwiper"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus.swiper3threadlist = false">取 消</el-button>
        <el-button type="primary" @click="pushThreadlist">确 定</el-button>
      </div>
    </el-dialog>


    <el-drawer
      :visible.sync="toolsBox"
      title="专题设计工具"
      size="50%"
      :direction="direction"
      class="drawer"
    >
      <div style="padding:0 20px;">
        <el-tabs v-model="activeTools" type="border-card">
          <el-tab-pane label="全局设置" name="base">
            <div class="block">
              <div class="demonstration">设置banner</div>
              <div style="display: flex">
              <el-upload
                class="upload-demo"
                :show-file-list="false"
                action="https://wz.mala.cn/userAdmin.Upload/uploadImage"
                :on-success="onSuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div class="banner" v-if="base.banner" style="width: auto;margin-left:20px;">
                <img :src="base.banner" style="height:70px;">
              </div>
              </div>
            </div>
            <div style="display: flex">
              <div class="block">
                <div class="demonstration">背景颜色</div>
                <el-color-picker v-model="base.color" @change="activeChange"></el-color-picker>
              </div>
              <div class="block" style="margin-left:70px;">
                <div class="demonstration">主体背景颜色</div>
                <el-color-picker v-model="base.maincolor" @change="activeChangemain"></el-color-picker>
              </div>
            </div>
            <div style="display: flex">
              <div class="block">
                <div class="demonstration">主体宽度</div>
                <el-input type="number" v-model="base.width" style="width:200px" placeholder="请输入主体宽度"></el-input>
              </div>
              <div class="block" style="margin-left:70px;">
                <div class="demonstration">主体Y漂浮</div>
                <el-input type="number" v-model="base.posY" style="width:200px" placeholder="请输入主体宽度"></el-input>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="增加组件" name="tools">
            <div class="tools-list">
              <div class="list" v-for="item in defTools" @click="addComs(item.value)">
                <div :class="`iconfont ${item.icon}`"></div>
                <div class="name">{{ item.name }}</div>
              </div>
            </div>


          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="editComsStatus"
      title="数据编辑"
      size="50%"
      class="drawer"
    >
      <div class="editComs">


        <div v-if="editComsList.k=='textarea'">
          <div class="block" style="margin-top:20px;">
            <div class="demonstration">文本内容</div>
            <el-input type="textarea" v-model="editComsList.v" rows="8" placeholder="这是一段文本域，点击可编辑"></el-input>
          </div>
          <div class="block" style="margin-top:20px;">
            <div class="demonstration">背景颜色</div>
            <el-color-picker v-model="editComsList.color" ></el-color-picker>
          </div>
          <div class="block" style="margin-top:20px;">
            <div class="demonstration">文字颜色</div>
            <el-color-picker v-model="editComsList.fontColor"></el-color-picker>
          </div>

          <div class="block" style="margin-top:20px;">
            <div class="demonstration">文字大小</div>
            <el-select v-model="editComsList.fontSize" placeholder="文字大小，默认16">
              <el-option
                v-for="item in ['12','14','16','18','20']"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>

          <div class="block" style="margin-top:20px;">
            <div class="demonstration">边距</div>
            <el-input type="textarea" v-model="editComsList.padding" placeholder="20px 20px"></el-input>
          </div>
          <div class="block" style="margin-top:20px;">
            <div class="demonstration">模板</div>
            <el-select v-model="editComsList.tpl">
              <el-option
                v-for="(item,uidx) in ['不使用',1]"
                :label="item"
                :value="uidx"
              >
              </el-option>
            </el-select>
          </div>
          <div class="block" style="margin-top:20px;">
            <div class="demonstration"></div>
            <el-button type="primary" @click="editsubmit(editComsList.idx)">提交修改</el-button>
          </div>

        </div>
        <div v-else-if="editComsList.k=='swiper'">

          <div style="margin-bottom:20px;">
            <div style="padding:10px 0;border-bottom:1px solid #ddd" v-for="(s,k) in editComsList.swpierData">
              <h4>数据{{ k + 1 }}</h4>
              <div class="block" style="margin-top:20px;">
                <div class="demonstration">幻灯片图片</div>
                <el-upload
                  class="upload-demo"
                  :show-file-list="false"
                  action="https://wz.mala.cn/userAdmin.Upload/uploadImage"
                  :on-success="function (response) {
                                    return swiperSuccess(response, k) }"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-image :src="editComsList.swpierData[k]['img']" v-if="editComsList.swpierData[k]['img']" fit="cover"
                          style="height:60px;margin-top:10px;"
                ></el-image>
              </div>
              <div style="display: flex;justify-content: space-between">
                <div class="block" style="margin-top:20px;width:calc(50% - 10px)">
                  <div class="demonstration">幻灯片标题</div>
                  <el-input v-model="editComsList.swpierData[k]['title']" @input="onInputSwiper"></el-input>
                </div>
                <div class="block" style="margin-top:20px;width:calc(50% - 10px)">
                  <div class="demonstration">幻灯片链接</div>
                  <el-input v-model="editComsList.swpierData[k]['links']" @input="onInputSwiper"></el-input>
                </div>
              </div>
            </div>
            <div class="block" style="margin-top:20px;">
              <div class="demonstration"></div>
              <el-button type="primary" @click="editsubmit(editComsList.idx)">提交修改</el-button>
              <el-popconfirm
                style="margin-left:30px;"
                title="删除后无法恢复，确认删除？"
                @confirm="deleComs(editComsList.idx)"
              >
                <el-button slot="reference" type="warning">删除该组件</el-button>
              </el-popconfirm>
            </div>
          </div>

        </div>

        <div v-else-if="editComsList.k=='swiper-3'">

          <div style="margin-bottom:20px;">
            <div class="block" style="margin-top:20px;width:calc(50% - 10px)">
              <div class="demonstration" style="color: red">模块名，可不填，若站内推送需要填写</div>
              <el-input v-model="editComsList.modelTitle" @input="onInputSwiper"></el-input>
            </div>
            <div style="padding:10px 0;border-bottom:1px solid #ddd" v-for="(s,k) in editComsList.swpierData">
              <h4>幻灯片数据{{ k + 1 }}</h4>
              <div class="block" style="margin-top:20px;">
                <div class="demonstration">幻灯片图片</div>
                <el-upload
                  class="upload-demo"
                  :show-file-list="false"
                  action="https://wz.mala.cn/userAdmin.Upload/uploadImage"
                  :on-success="function (response) {
                                    return swiperSuccess(response, k) }"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-image :src="editComsList.swpierData[k]['img']" v-if="editComsList.swpierData[k]['img']" fit="cover"
                          style="height:60px;margin-top:10px;"
                ></el-image>
              </div>
              <div style="display: flex;justify-content: space-between">
                <div class="block" style="margin-top:20px;width:calc(50% - 10px)">
                  <div class="demonstration">幻灯片标题</div>
                  <el-input v-model="editComsList.swpierData[k]['title']" @input="onInputSwiper"></el-input>
                </div>
                <div class="block" style="margin-top:20px;width:calc(50% - 10px)">
                  <div class="demonstration">幻灯片链接</div>
                  <el-input v-model="editComsList.swpierData[k]['links']" @input="onInputSwiper"></el-input>
                </div>
              </div>
            </div>


            <div style="padding:10px 0;border-bottom:1px solid #ddd">
              <h4>文字数据</h4>
              <el-table
                :data="editComsList.threadList"
                style="width: 100%"
              >
                <el-table-column
                  prop="links"
                  label="链接"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="标题"
                  width="300"
                >
                </el-table-column>
                <el-table-column
                  prop="desc"
                  label="简介"
                  width="300"
                >
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <span @click="EditThreadList(scope.row,scope.$index)" style="margin-right:5px;color:#20a0ff;cursor: pointer">编辑</span>
                    <span @click="handleDelete(scope.$index, editComsList.idx)" style="color:#999；cursor: pointer">删除</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-button size="mini" type="primary" @click="dialogStatus.swiper3threadlist=true;this.tempData = {};"
                         style="margin-top: 10px"
              >添加文字数据
              </el-button>

            </div>
            <div class="block" style="margin-top:60px;">
              <div class="demonstration"></div>
              <el-button type="primary" @click="editsubmit(editComsList.idx)">提交修改</el-button>
              <el-popconfirm
                style="margin-left:30px;"
                title="删除后无法恢复，确认删除？"
                @confirm="deleComs(editComsList.idx)"
              >
                <el-button slot="reference" type="warning">删除该组件</el-button>
              </el-popconfirm>
            </div>
          </div>

        </div>
      </div>
    </el-drawer>
    <div class="openBox" @click="save" style="right:200px;">保存</div>
    <div class="openBox" v-if="toolsBox==false" @click="toolsBox=true">打开工具</div>
    <div class="banner" v-if="base.banner">
      <img :src="base.banner">
    </div>
    <div class="calendarMain"
         :style="`width:${base.width}px;background:${base.maincolor};position: relative;top:${base.posY}px`" id="main"
    >
      <draggable v-model="list"
                 fallbackClass="fallbackClass"
                 ghostClass="ghostClass"
                 chosenClass="chosenClass"
                 dragClass="dragClass"
                 @update="Draggable"
      >
        <div v-for="(element,idx) in list" class="box-drag">
          <div v-if="element.k=='swiper'" class="Swiper dragBox" @click="EditComs(idx,element.k)">
            <div class="swiper-box">
              <img :src="element.swpierData[0].img" v-if="element.swpierData[0].img">
              <div v-else class="emptyswiperFUll">
                宽度：{{ base.width }}px
              </div>
              <div class="el-icon-arrow-right arrow"></div>
              <div class="el-icon-arrow-left arrow"></div>
              <div class="swpier_text">
                <span>{{ element.swpierData[0].title || '幻灯片标题' }}</span>
              </div>
            </div>
          </div>
          <div v-else-if="element.k=='textarea'" class="textarea dragBox" @click="EditComs(idx,element.k)">
            <div :class="['textarea',element.tpl?'tpl_'+element.tpl:'']"
                 :style="`font-size:${element.fontSize||'16'}px;color:${element.fontColor||'#000'};background-color:${element.color||'#fff'};padding:${element.padding||'0px'}`"
            >{{ element.v || '这是一段文本域，点击可编辑' }}
            </div>
          </div>

          <div v-if="element.k=='swiper-3'" class="Swiper dragBox" @click="EditComs(idx,element.k)">
            <div class="swiper3">
              <div class="swiper-box" style="width:700px;">
                <img :src="element.swpierData[0].img" v-if="element.swpierData[0].img">
                <div v-else class="emptyswiperFUll">
                  宽度：700px
                </div>
                <div class="el-icon-arrow-right arrow"></div>
                <div class="el-icon-arrow-left arrow"></div>
                <div class="swpier_text">
                  <span>{{ element.swpierData[0].title || '幻灯片标题' }}</span>
                </div>
              </div>
              <div class="news" :style="`width:calc(${base.width}px - 700px)`">
                <div class="newsItem" v-for="j in 3">
                  <a class="title" href="">11</a>
                  <div class="desc">asdfsaf</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { getDiy, saveDiySpecial } from '@/api/wz'

export default {
  components: {
    draggable
  },
  data() {
    return {
      id: 1,
      pageLoading: true,
      uploadUrl: '',
      sall: 1,
      dialogStatus: {
        swiper3threadlist: false
      },
      toolsBox: false,
      editComsStatus: false,
      editComsList: [],
      tempData: { },
      elementloadingtext: '',
      direction: 'btt',
      activeTools: 'tools',
      defTools: [
        { name: '文本域', 'value': 'textarea', 'icon': 'icon-wenbenyu' },
        { name: '幻灯片', 'value': 'swiper', 'icon': 'icon-banner' },
        { name: '幻灯片+3标题', 'value': 'swiper-3', 'icon': 'icon-banner' }
      ],
      list: [],
      base: {
        posY: 0,
        width: '1200',
        maincolor: '',
        color: '',
        banner: ''
      }
    }
  },
  created() {
    this.loadDiy()
  },
  watch: {
    'editComsList': {
      handler: function(n, o) {
        let idx = n.idx
        this.$set(this.list, idx, n)
      },
      deep: true
    }
  },
  methods: {
    colorChange(a,b){
      console.log(a,b)
    },
    EditThreadList(data,edidx){
      this.dialogStatus.swiper3threadlist = true;
      data.idx = edidx
      this.tempData = data
    },
    handleDelete(rowId,idx){
      let CoypeditComsList = this.editComsList.threadList
      CoypeditComsList.splice(rowId, 1)
      this.$set(this.editComsList, 'threadList',CoypeditComsList)
    },
    pushThreadlist(){

      if(this.tempData.idx>=0){
        // this.editComsList.threadList[this.tempData.idx] = this.tempData
        this.$set(this.editComsList.threadList, this.tempData.idx,this.tempData)
      }else{
        let threadList = this.editComsList.threadList||[]
        threadList.push(this.tempData)
        this.$set(this.editComsList, 'threadList',threadList)
      }
      this.tempData = {};
      this.dialogStatus.swiper3threadlist = false

    },
    deleComs(idx) {
      //深拷贝
      console.log(idx)
      let Coyplist = this.list
      Coyplist.splice(idx, 1)
      this.list = Coyplist
    },
    swiperSuccess(file, k) {
      this.$set(this.editComsList.swpierData, k, { img: file.data })
      console.log(this.editComsList)
    },
    editsubmit(idx) {

      saveDiySpecial({ diyJson: this.list, baseJson: this.base }).then(r => {

      })
    },
    EditComs(idx, coms) {
      this.editComsList = []
      this.editComsStatus = true
      this.list[idx].idx = idx
      if (!this.list[idx].modelTitle) {
        this.list[idx].modelTitle = 'swiper-3-'+this.generate(8)
      }

      this.editComsList = this.list[idx]
    },
    save() {
      this.pageLoading = true
      this.elementloadingtext = '保存中...'
      saveDiySpecial({ diyJson: this.list, baseJson: this.base }).then(r => {
        this.pageLoading = false
      })
    },
    Draggable() {
      saveDiySpecial({ diyJson: this.list, baseJson: this.base }).then(r => {

      })
    },
    onInputSwiper() {
      this.$forceUpdate()
    },
    addComs(k, v) {
      let arr = this.list.push({ k: k })
      this.editComsList = []
      this.editComsStatus = true
      let idx = parseInt(arr) - 1
      this.list[idx].idx = idx
      if (k == 'swiper') {
        this.list[idx].swpierData = [
          { title: '', img: '' }
        ]
      }
      if (k == 'swiper-3') {
        this.list[idx].swpierData = [
          { title: '', img: '' }
        ]
        this.list[idx].modelTitle = '123'
        this.list[idx].threadlist = []
      }
      this.$set(this, 'editComsList', this.list[idx])
      // this.editComsList = this.list[idx]
      this.toolsBox = false
      console.log(this.editComsList)
    },
    onSuccess(res, file, fileList) {
      this.$set(this.base, 'banner', res.data)
    },
    activeChangemain(e) {
      if(!e){
        this.$set(this.base, 'maincolor', '')
      }else{
        this.$set(this.base, 'maincolor', e)
      }

    },
    activeChange(e) {
      this.$set(this.base, 'color', e)
      this.setCssVar('background-color', e)
    },
    setCssVar(prop, val, dom = document.documentElement) {
      dom.style[`${prop}`] = val
    },
    loadDiy() {
      getDiy({ id: this.id }).then(r => {
        this.list = r.data.diyJson
        this.base = r.data.baseJson
        this.pageLoading = false
      })
    },
    generate(value) {
      value = Math.random().toString(36).slice(2);
      return value;
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ html {
  background-color: var(--main-bg-color) !important;
}

.app-container {
  min-height: 100vh;
}

.editComs {
  padding: 10px 30px;

  h4 {
    margin: 0;
    margin-bottom: 10px;
  }

  .label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #8492a6;
  }
}

.tools-list {
  display: flex;

  .list {
    margin-right: 20px;
    border: 1px solid #ddd;
    text-align: center;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    height: 100px;

    &:hover {
      border-color: #8492a6;
    }

    .name {
      color: #8492a6;
      font-size: 14px;
      margin-top: 10px;
    }

    .iconfont {
      font-size: 40px !important;
      color: #8492a6;
    }
  }
}

.calendarMain {
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}

.banner {
  width: 100%;
  text-align: center;

  img {
    width: 100%;
    object-fit: contain;
  }
}

.block {
  display: block;
  margin-bottom: 20px;

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.openBox {
  position: fixed;
  background: #20a0ff;
  padding: 10px 30px;
  color: #fff;
  transition: .2s all;
  border-radius: 20px;
  right: 20px;
  bottom: 20px;
  cursor: pointer;

  &:hover {
    transform: scale(1.05);
  }
}

.dragClass {
  opacity: 1;
  transform: scale(0.3);
}

.fallbackClass {
  opacity: 1;
  border: 5px solid #20a0ff !important;
}

.chosenClass {
  border-radius: 4px;
  opacity: 1 !important;

  .dragBox {
    margin: 15px 0;

    //&:hover {
    //  border: 1px solid #20a0ff;
    //}
  }
}

.ghostClass {
  //opacity: 1 !important;
  opacity: .2 !important;
}

.draggable {
  cursor: pointer;
  width: 141px;
  height: 100px;
}

.box-drag {
  margin: 0 auto;
  cursor: pointer;

  .dragBox {
    margin: 15px 0;
    position: relative;

    &:hover {
      //border: 1px solid #20a0ff;
      &:before {
        position: absolute;
        background: rgba(0, .0, 0, .7);
        content: "拖动排序，点击编辑";
        height: 100%;
        width: 100%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30px;
        top: 0;
        z-index: 100;
      }
    }
  }

  .textarea {
    font-size: 16px;
    color: #444;
    line-height: 28px;

    &.tpl_1 {
      text-indent: 2em !important;
      letter-spacing: 3px !important;;
      font-size: 24px !important;;
      line-height: 1.5 !important;;
      padding: 24px !important;;
      color: #999 !important;;
      background-color: #f6f6f6 !important;;
    }
  }

  .Swiper {
    width: 100%;

    .news {
      text-align: center;

      .newsItem {
        margin-bottom: 20px;
        height: 110px;
        margin-left: 30px;

        .title {
          width: 100%;
          font-size: 24px;
          font-weight: bold;
        }

        .desc {
          color: #999;
          font-size: 16px;
          text-align: left;
        }
      }
    }

    .swiper-box {
      overflow: hidden;
      background: rgba(0, 0, 0, .1);
      height: 400px;
      position: relative;

      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 90px;
        left: 0;
        bottom: 0px;
        background: -webkit-linear-gradient(top, transparent, #000);
        opacity: .7;
      }
    }

    .swiper3 {
      display: flex;
    }

    .emptyswiperFUll {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }


    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 60px;
      color: #fff;

      &.el-icon-arrow-left {
        left: 0;
      }

      &.el-icon-arrow-right {
        right: 0;
      }
    }

    .swpier_text {
      position: absolute;
      height: 100px;
      width: 100%;
      bottom: 0;

      span {
        font-size: 22px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        left: 20px;
        bottom: 20px;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
